<template>
    <div class="wrapper wrapper6">
        <div class="page-header">
            <h3>{{ title }}</h3>
        </div>
        <div class="page-content">
            <h4
                :class="[active, changed]"
                :style="{ color: 'red', fontSize: '20px' }"
            >
                这里是一段标题
            </h4>
            <button class="btn btn-primary" @click="active = !active">
                切换active
            </button>
            &nbsp;&nbsp;
            <button class="btn btn-primary" @click="changed = !changed">
                切换changed
            </button>
        </div>
    </div>
</template>

<script setup>
import { defineProps, ref } from "vue";
const props = defineProps({
    title: {
        type: String,
        default: "Dashboard",
    },
});

const active = ref("active");
const changed = ref("changed");
</script>

<style lang="scss" scoped>
h4 {
    transform: translateX(0);
    transition: 1s all;
    position: relative;
    pointer-events: none;
    top: 0px;
    &.active {
        transform: translateX(60%);
    }
    &.changed {
        top: -600px;
    }
}
</style>
